<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/mui.js"></script>
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/mui.indexedlist.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/header.css" />

		<style>
			#btn_add_friend {
	        	color: #0062CC;
	        }
	        #btn_add_friend:active {
	            background-color: #128e12;
	        }
			.head-img{
				border-radius: 5px;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<label class="mui-title title-color" id="chatting-nickname" style="text-align: left; margin-top: 2px;">详细资料</label>
		</header>

		<div class="mui-content">
			<ul class="mui-table-view" style="margin: 0;">
				<li class="mui-table-view-cell mui-media" style="padding-top: 10px;">
					<a href="javascript:;">
						<img id="img_thum_head_portrait" class="mui-media-object mui-pull-left head-img" src="../../image/loading.jpg"
						 style="border-radius: 8%;line-height: 50px;max-width: 50px;height: 50px;">
						<div class="mui-media-body">
							<label id="lab_nickname">昵称</label>
							<p id="p_nickname" class="mui-ellipsis" style="margin-top: 5px;">昵称：</p>
							<p id="p_account" class="mui-ellipsis" style="margin-top: 1px;">微信号：</p>
							<p id="p_address" class="mui-ellipsis" style="margin-top: 1px;">地区：</p>
						</div>
					</a>
				</li>
			</ul>
			<br />
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="text-align: left;">
					<div class="mui-media-body">
						<label style="width: 30%; display: inline-block; font-size: 16px;">个性签名</label>
						<span style="margin-left: 20px;color: darkgray; font-size: 15px;" id="span_signature"></span>
					</div>
				</li>
				<li class="mui-table-view-cell mui-media" style="text-align: left;">
					<div class="mui-media-body">
						<label style="width: 30%; display: inline-block; font-size: 16px;">来源</label>
						<span style="margin-left: 20px;color: darkgray; font-size: 15px;">来自账号搜索</span>
					</div>
				</li>
			</ul>

			<br />
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a id="btn_add_friend" href="javascript:;">
						<div class="mui-media-body">
							添加到通讯录
						</div>
					</a>
					<a id="btn_send_msg" href="javascript:;" style="display: none;">
						<div class="mui-media-body">
							发送消息
						</div>
					</a>
				</li>
			</ul>

		</div>

		<script type="application/javascript" src="../../js/app.js"></script>
		<script type="application/javascript" src="../../js/db/db.js"></script>
		<script type="application/javascript" src="../../js/db/chatsnapshotmessagedb.js"></script>
		<script type="text/javascript">
			mui.init({
				beforeback: function() {
					console.log("进入beforeback函数")
					// 获取二维码页面
					let scanme = plus.webview.getWebviewById('scanme.html');
					// 触发列表页面的自定义事件 startAgain
					mui.fire(scanme, 'startAgain');
					return true;
				}
			});

			mui.plusReady(function() {

				let user = app.getCacheUser();

				// 获取上一个页面传入的对象，并且对本页面响应的dom赋值初始化
				let currnetWebview = plus.webview.currentWebview();
				let requestFriend = currnetWebview.requestFriend;

				if (requestFriend.isFriend || user.id == requestFriend.id) {
					document.getElementById("btn_add_friend").style.display = "none";
					document.getElementById("btn_send_msg").style.display = "block";
				}

				document.getElementById("img_thum_head_portrait").src = requestFriend.thumHeadPortrait;
				document.getElementById("lab_nickname").innerHTML = requestFriend.nickname;
				document.getElementById("p_nickname").innerHTML = "昵称：" + (requestFriend.nickname == null ? "" : requestFriend.nickname);
				document.getElementById("p_account").innerHTML = "微信号：" + (requestFriend.account == null ? "" : requestFriend.account);
				document.getElementById("p_address").innerHTML = "地区：" + (requestFriend.address == null ? "" : requestFriend.address);
				document.getElementById("span_signature").innerHTML = (requestFriend.span_signature == null ? "" : requestFriend.span_signature);
				plus.nativeUI.closeWaiting();
				// 发送添加好友的请求
				let btn_add_friend = document.getElementById("btn_add_friend");
				btn_add_friend.addEventListener("tap", function() {
					plus.nativeUI.showWaiting("请稍后...");
					let params = {
						userId: user.id,
						friendId: requestFriend.id
					};
					mui.ajax(app.serverUrl + "/friend", {
						data: params,
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'auth-token': app.getAuthToken()
						},
						success: function(res) {
							//服务器返回响应
							plus.nativeUI.closeWaiting();
							if (res.code === 0) {
								app.showToast(res.msg, "success");
								mui.openWindow({
									url: "../../index.html",
									id: "index.html"
								});
							} else {
								app.showToast(res.msg, "error");
							}
						}
					});
				});

				// 发送消息点击事件
				let btn_send_msg = document.getElementById("btn_send_msg");
				btn_send_msg.addEventListener("tap", function() {
					let friendUserId = requestFriend.id;
					let friendNickname = requestFriend.nickname;
					let friendThumHeadPortrait = requestFriend.thumHeadPortrait;
					let friendAccount = requestFriend.account;

					// 标记未读状态为已读
					chatsnapshotmessagedb.updateUnread({
						friendId: friendUserId,
						unread: 0
					}, () => {
						// 渲染快照列表进行展示
						let chatWebview = plus.webview.getWebviewById("chat.html");
						chatWebview.evalJS("loadingChatSnapshot()");
						plus.webview.close(plus.webview.currentWebview());
						// 打开聊天子页面
						mui.openWindow({
							url: "../chat/chatting.html",
							id: "chatting-" + friendUserId, // 每个朋友的聊天页面都是唯一对应的
							extras: {
								friendUserId: friendUserId,
								friendNickname: friendNickname,
								friendThumHeadPortrait: friendThumHeadPortrait,
								friendAccount: friendAccount
							}
						});
					})
				});
			});
		</script>
	</body>

</html>
